Membuat Komentar Terbaru dengan Gambar

Halo sobat blog trik dan tips, kali ini kita akan membuat komentar terbaru dengan gambar. Widget ini menggunakan javascript dan sangat mudah untuk diinstal. Sobat dapat memasang widget ini pada blog anda untuk sekedar memperindah atau mempercantik blog. Anda dapat mengetahui apabila seseorang berkomentar pada blog anda. Gambar komentator ditampilkan dalam bentuk lingkaran sehingga memberikan efek yang sangat menarik. Jika sobat ingin memasangnya pada blog ikuti langkah berikut ini:

1. Login ke Blogger
2. Masuk ke Rancangan --> Edit Laman
3. Tambahkan gadjet lalu pilih HTML/Javascript
4. Masukan kode berikut ini:

<style type="text/css">
ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
.w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
.w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
.w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 5,
showAvatar = true,
avatarSize = 30,
roundAvatar = true,
characters = 30,
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b-recent-comments-w-gravatar.js"></script>
<script type="text/javascript" src="http://blogtrikdantips.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>

5. Selanjutnya sobat tinggal menganti kode berwarna merah dengan url blog anda.
6. Jika sobat ingin mengedit tampilan widget ini berikut adalah penjelasannya:
- Kode berwarna hijau adalah jumlah komentar yang ditampilkan
- Kode berwarna biru aadalah ukuran gambar komentator
- Kode berwarna orens adalah rincian komentar dari komentator
7. Terakhir simpan gadjet anda.

Demikian adalah sekilas penjelasan bagaimana membuat komentar terbaru dengan gambar atau istilah lainnya yaitu membuat recent comment dengan avatar. Semoga dengan widget ini tampilan blog anda lebih menarik serta lebih banyak yang berkomentar. Sekian dan salam blogging....

Komentar , Tips dan Triks

Membuat Komentar Area Paling Keren ala IntenseDebate

Blog Trik dan Tips ingin memberikan apresiasi serta 2 jempol untuk IntenseDebate karena telah mengembangkan komentar area dengan fitur yang sangat menarik. Untuk membuat komentar area menjadi stylis biasanya membutuhkan banyak waktu untuk mengedit template anda, namun dengan IntenseDebate, anda bisa membuat komentar area menjadi lebih mudah dan terlihat keren. Pengunjung yang datang ke blog anda akan memperoleh kemudahan serta menyukai komentar area yang anda miliki. Beberapa fitur yang ditawarkan IntenseDebate yaitu, threaded comment, email notifikasi, profil komentator, moderasi serta blacklist, open id, integrasi twitter, facebook dan rss, plugin api, dan widget. Jika sobat tertarik untuk membuatnya ikuti petunjuk dibawah ini:

1. Simpan template anda terlebih dahulu untuk mencegah terjadi kesalahan editing
2. Kunjungi situs IntenseDebate lalu daftarkan diri anda (Isi Username, password, email)
3. Lakukan konfirmasi email untuk aktivasi akun IntenseDebate
4. Setelah itu instal IntenseDebate (masukan url blog anda)

5. Selanjutnya upload template blog anda ke IntanseDebate, dimana secara otomatis template anda akan dimodifikasi.
6. Kopi kode yang telah dimodifikasi
7. Lalu login ke Blogger, masuk ke Rancangan --> Edit HTML
8. Centang Expand Template Widget
9. Hapus semua kode tersebut lalu paste kode yang telah kita kopi dari IntenseDebate
10. Simpan template anda lalu lihat hasilnya

Mudah sajakan untuk membuat komentar area IntenseDebate pada blog anda. Anda juga dapat menambah widget dari intense debate seperti blog stat, komentar terbaru, popular blog post, top user widget dan my recent comment widget. Lengkap semua fiturnya yang pasti sangat bermanfaat. Demikian tutorial blog trik dan tips semoga bermanfaat.

Komentar , Widget

Cara Aktifkan dan Non-aktifkan Kotak Komentar

Salah satu cara untuk berinteraksi dengan pengunjung pada blog yang anda kelola yaitu dengan mengaktifkan kotak komentar. Dengan mengaktifkan komentar maka pengunjung blog akan memiliki pilihan untuk menanggapi posting yang anda terbitkan. Jika anda menggunakan template blogger yang baru maka kini blogger telah mendukung threaded komentar. Kotak komentar ada berbagai macam tampilan, misalnya ada yang berbentuk pop-up, dibawah entri, atau full entri. Ada juga sebagian blog yang memilih untuk menyembunyikan kotak komentar blogger mereka. Tentunya hal ini dikarenakan mereka telah menggunakan kotak komentar lain misalnya kotak komentar facebook. Jika sobat ingin mengaktifkan atau menonaktifkan kotak komentar maka ikuti langkahnya dibawah ini:

1. Log in ke Blogger
2. Masuk ke Setelan lalu pilih tab Komentar

3. Jika anda ingin menampilkan kotak komentar maka pilih "Tampilkan", namun jika ingin disembunyikan pilih "Sembunyikan"
4. Jangan lupa untuk Simpan Setelan di halaman bawah.

Demikian tutorial singkat dari saya semoga anda dapat terbantu. Jika anda pertanyaan yang ingin ditanyakan maka anda bisa kirimkan komentar anda pada blog saya. Terima kasih...

Komentar

Cara Menggunakan Komentar OpenID

Saat berkomentar sobat pasti sering menemukan blog yang mengijinkan pengunjung berkomentar dengan OpenID. OpenID adalah standar terbuka yang memungkinkan pengguna aktif layanan OpenID untuk login ke situs OpenID yang didukung dengan satu set login. User dengan OpenID dapat mengakses layanan komentar pada blog. Layanan OpenID pada blog anda merupaksan cara untuk mengotentikasi pengguna komentar di blog, tanpa memerlukan pembaca untuk memiliki akun Google. Contohnya, jika teman anda Upin dari Wordpress, yang tidak memiliki Akun Google. Dengan OpenID, ia dapat berkomentar di blog Anda menggunakan akses OpenID dan mengidentifikasi dirinya sebagai pemilik wordpress tersebut

Cara mengaktifkan layanan OpenID pada blog?
Untuk mengaktifkan layanan OpenID masuk ke Settings lalu pilih Komentar. Pada sebelah kiri halaman anda akan menemukan tulisan "siapa yang boleh berkomentar" lalu pilih "Pengguna Terdaftar - Termasuk OpenID". Setelah itu klik tombol "Simpan Pengaturan" di bagian bawah halaman. Jika anda memilih "Siapa pun" untuk berkomentar maka terkadang pengunjung dapat menggunakan komentar Anonim sehingga anda tidak dapat mengetahui orang yang berkomentar. Beberapa pengguna anonim terkadang menggunakan spam, atau kata-kata kotor pada kotak komentar anda. Jika anda ingin mencegahnya maka aktifkan "Pengguna Terdaftar"

Cara Menggunakan identitas OpenID?
Ketika anda berkunjung ke sebuah blog coba gunakan identitas OpenID ketika berkomentar. Caranya yaitu: pilih penyedia OpenID dari drop down menu di sebelah opsi "Sign-in", Jika penyedia OpenID tidak ada dalam daftar, silakan pilih "Setiap ID" pilihan. Selanjutnya, login dengan OpenID anda. Tulis komentar anda dan klik "Publikasikan Komentar Anda". Anda akan diarahkan ke penyedia OpenID Anda untuk mengotentikasi ID anda. Setelah otentikasi dengan provider, anda akan kembali ke halaman komentar dan secara otomatis komentar anda akan diposting.

Komentar

Cara Mengetahui Komentar Facebook yang Masuk di Blog

Jika anda mempunyai komentar facebook yang terpasang pada blog, maka anda akan bertanya bagaimana cara melihat komentar facebook yang masuk di blog. Ada pasti kesulitan menggunakan komentar facebook karena sulit mengetahui komentar terbaru yang masuk. Seringkali kita juga kesulitan untuk membalas komentar yang masuk bahkan tidak mengetahuinya. Hal ini disebabkan karena kita tidak menerima notifikasi apabila ada komentar yang masuk. Namun jangan cemas karena ada cara yang kita bisa lakukan untuk mengetahui komentar facebook yang masuk pada blog anda. Untuk itu ikuti tutorialnya dibawah ini:

1. Login ke facebook menggunakan akun sobat!
2. Masukan url dibawah ini di address bar anda

http://developers.facebook.com/tools/comments/?id=FACEBOOK_ID&view=queue

3. Ganti tulisan FACEBOOK_ID dengan ID facebook anda (kode berwarna merah)

4. Setelah itu anda akan masuk ke Alat Moderisasi Komentar -- (Komentar Publik)
5. Untuk melihat artikel atau posting klik Pandangan Moderator disini anda bisa memoderisasi komentar facabook yang masuk di blog
6. Sedangkan untuk pengaturan komentar anda bisa klik link Pengaturan disamping kanan browser
7. Untuk memudahkan anda dalam melihat komentar facebook yang masuk, dapat anda bookmark halaman tersebut.

Sekian tutorial dari saya, semoga dengan posting ini dapat membantu anda mengelola komentar facebook yang masuk pada blog anda. Semoga artikel ini bermanfaat dan selamat mencoba!

Komentar

Membuat Komentar Facebook Berdampingan dengan Komentar Blogger

Hai sob bagaimana kabar akhir pekan anda yang pasti menyenangkan bukan. Kebetulan karena suasana yang menyenangkan ini saya akan memberikan tutorial gimana cara membuat komentar facebook dan blogger berdampingan di blog anda. Trik yang satu ini udah saya terapkan di Blog trik dan Tips dan hasilnya sangat bagus. Oke langsung saja kita ikuti langkah-langkahnya ya: Apa itu Harlem Shake

1. Login ke Blogger
2. Masuk ke Rancangan --> Klik Edit HTML
3. Centang Expand Template Widget
4. Carilah kode <div class='comments' id='comments'>
5. Setelah ketemu paste kode dibawah ini dibawah kode <div class='comments' id='comments'>

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<fb:comments-count expr:href='data:post.url'/> Komentar Facebook
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Komentar Blogger
</div><div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

Keterangan: kode warna merah adalah lebar kotak komentar, tinggal anda sesuaikan

6. Kemudian letakkan kode dibawah ini diatas kode </head>

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='BlogTrikDanTips' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(".comments-tab").addClass("inactive-select-tab");
$(selectTab).removeClass("inactive-select-tab");
$(".comments-page").hide();
$(selectTab + "-page").show();
}
</script>

7. Ganti ID Facebook (BlogTrikDanTips) dengan ID Facebook anda
8. Cari lagi kode /* atau #comments
9. Letakan kode berikut ini dibawah kode tadi

.comments-page { background-color: #f2f2f2;}
#blogger-comments-page { padding: 0px 5px; display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}
.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}

Sekian tutorial dari saya selamat mencobanya.

Komentar

Membuat Avatar pada Komentar Anonymous di Blog

Ada cara untuk mengganti gambar default anonymous komentar pengunjung ke gambar lain yang lebih menarik. Gambar atau avatar pada komentar dapat kita ganti dengan emoticon, gambar kaskus, dan lain-lain. Kita akan menggunakan script jquery sehingga mudah saja untuk memasangnya. Gambar tersebut akan muncul ketika sesorang tanpa id (anonymous) memberikan komentar pada blog anda. Penasaran bagaimana cara membuatnya, ikuti tutorial yang berikut ini: Apa itu Harlem Shake

1. Log in ke blogger.
2. Pilih Rancangan --> Edit HTML
3. Carilah kode </body>
4. Kemudian tambahkan kode dibawah ini diatas kode </body>

<!-- Avatar Komentar by www.blogtrikdantips.blogspot.com start --><script src='http://code.jquery.com/jquery-latest.js'/>
<script>
$("img[src='http://img1.blogblog.com/img/anon36.png']")
.attr('src', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig2A3BJ6yCcFcmRu4Hpvxa65lX90wr0XW4wJ173QLLOOtowunlmcuGsZSj4sj1ae1o5QcH_D9_hUdLEDth5JzeHqa9HRQW5tBm4XXh11UKL4SJHzQjCLJ_CzsQ_eJM2aTHr2EjCLZnYIg/s1600/anon5.png')
.ssyby('blank')
</script><!-- Avatar Komentar by www.blogtrikdantips.blogspot.com end -->

Keterangan:
- Anda tidak perlu memasang script jquery seperti diatas apabila telah terpasang pada template anda.
- Anda dapat mengganti kode warna merah dengan url gambar yang anda inginkan

5. Simpan template anda lalu lihat hasilnya

Sekian trik dan tips dari saya. Semoga dengan penampilan avatar yang baru pada blog anda akan semakin menarik pengunjung untuk berkomentar. Semoga tutorial singkat ini bermanfaat, selamat mencoba.

Komentar

Membuat Tulisan Admin pada Komentar Anda

Biasanya kita menggunakan highlighter untuk membedakan komentar admin dan pengunjung. Namun ada cara lain untuk kita membuat komentar admin berbeda dengan komentar pengunjung, yaitu dengan membuat tulisan ADMIN pada sudut dari kotak komentar admin. Komentar admin ini akan berbeda pada threaded comments sehingga kita dapat membedakan antara pengujung dan admin. Untuk melihat contohnya anda bisa lihat digambar samping atau pada komentar di Blog Trik dan Tips. Jika anda ingin membuatnya ikuti langkah berikut ini: Apa itu Harlem Shake

1. Login ke Blogger
2. Masuk ke Rancangan --> Klik Edit HTML
3. Cari kode </body>
4. Paste kode dibawah ini diatas kode </body>

<script src='http://code.jquery.com/jquery-latest.js'/>
<!-- Admin comments by www.blogtrikdantips.blogspot.com start-->
<script>
$(function() {
function highlight(){
$('.user.blog-author,.ssyby').closest('.comment-block')
.css('border', '1px solid #e1e1e1')
.css('background','#f1f1f1 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgThKwXUMle_c8vb-S_qxp1WEWIgSZCM05yvnzVUqEGhy8m27-03qggpsCpYKUQ-6OtbsXosPojjl-ancpazuGMBVPGz1LxsQDd9flmtIqNpm2k_YFfZguZZHulhe3PmRd745iD13sCOEY/s1600/admin2.png") no-repeat bottom right')
.css('padding', '10px');
}
$(document).bind('ready scroll click', highlight);
});
</script>
<!-- Admin comments ends -->

Keterangan:
- kode merah adalah garis pinggir
- kode biru adalah warna background
- kode hijau adalah gambar tulisan admin
- kode orens adalah jarak garis pinggir ke tulisan

5. Terakhir simpan template anda lalu lihat hasilnya

Sangat mudah kan untuk membuat tulisan komentar admin di daftar komentar blog anda. Silahkan dicoba aja yang pasti akan membuat blog anda semakin tambah bagus untuk dilihat.

Komentar

Memperbaiki Fungsi Tombol Reply pada Threaded Comments

Blog trik dan tips kali ini akan membahas bagaimana mengatasi masalah pada tombol reply threaded comments. Ada pasti sudah tau apa itu threaded comments, namun terkadang fungsi dari threaded comments tidak dapat bekerja dengan baik . Permasalahannya terletak pada tombol reply atau tombol balas. Ketika di klik malah tidak berfungsi, yang muncul adalah tulisan "javascript:void(0)" disudut kanan bawah browser anda. Harlem Shake adalah

Saya pun pernah memiliki masalah tersebut namun masalah itu udah saya pecahkan dan akhirnya threaded comments bisa bekerja dengan baik pada blog saya. Nah sobat ingin tau caranya ikuti langkah berikut ini:

1. Login ke Blogger
2. Masuk ke Rancangan --> Klik Edit HTML
3. Back up atau download template anda terlebih dahulu
4. Klik Expand Template Widget
5. Carilah kode seperti dibawah ini:

<b:includable id='threaded_comment_js' var='post'>
<script defer='defer' expr:src='data:post.commentSrc' type='text/javascript'/>

<script type='text/javascript'>
(function() {
var items = <data:post.commentJso/>;
var msgs = <data:post.commentMsgs/>;
var postId = &#39;<data:post.id/>&#39;;
var feed = &#39;<data:post.commentFeed/>&#39;;
var authorName = &#39;<data:post.author/>&#39;;
var authorUrl = &#39;<data:post.authorUrl/>&#39;;
var blogId = &#39;<data:top.id/>&#39;;
var baseUri = &#39;<data:post.commentBase/>&#39;;

// <![CDATA[
feed += '?alt=json&v=2&orderby=published&reverse=false&max-results=50';
var cursor = null;
if (items && items.length > 0) {
cursor = parseInt(items[items.length - 1].timestamp) + 1;
}

var bodyFromEntry = function(entry) {
if (entry.gd$extendedProperty) {
for (var k in entry.gd$extendedProperty) {
if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved') {
return '<span class="deleted-comment">' + entry.content.$t + '</span>';
}
}
}
return entry.content.$t;
}

var parse = function(data) {
cursor = null;
var comments = [];
if (data && data.feed && data.feed.entry) {
for (var i = 0, entry; entry = data.feed.entry[i]; i++) {
var comment = {};
// comment ID, parsed out of the original id format
var id = /blog-(\d+).post-(\d+)/.exec(entry.id.$t);
comment.id = id ? id[2] : null;
comment.body = bodyFromEntry(entry);
comment.timestamp = Date.parse(entry.published.$t) + '';
if (entry.author && entry.author.constructor === Array) {
var auth = entry.author[0];
if (auth) {
comment.author = {
name: (auth.name ? auth.name.$t : undefined),
profileUrl: (auth.uri ? auth.uri.$t : undefined),
avatarUrl: (auth.gd$image ? auth.gd$image.src : undefined)
};
}
}
if (entry.link) {
if (entry.link[2]) {
comment.link = comment.permalink = entry.link[2].href;
}
if (entry.link[3]) {
var pid = /.*comments\/default\/(\d+)\?.*/.exec(entry.link[3].href);
if (pid && pid[1]) {
comment.parentId = pid[1];
}
}
}
comment.deleteclass = 'item-control blog-admin';
if (entry.gd$extendedProperty) {
for (var k in entry.gd$extendedProperty) {
console.log(entry.gd$extendedProperty[k].name + ' - ' + entry.gd$extendedProperty[k].value);
if (entry.gd$extendedProperty[k].name == 'blogger.itemClass') {
comment.deleteclass += ' ' + entry.gd$extendedProperty[k].value;
}
}
}
comments.push(comment);
}
}
return comments;
};

var paginator = function(callback) {
if (hasMore()) {
var url = feed;
if (cursor) {
url += '&published-min=' + new Date(cursor).toISOString();
}
window.bloggercomments = function(data) {
var parsed = parse(data);
cursor = parsed.length < 50 ? null
: parseInt(parsed[parsed.length - 1].timestamp) + 1
callback(parsed);
window.bloggercomments = null;
}
url += '&callback=bloggercomments';
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
document.getElementsByTagName('head')[0].appendChild(script);
}
};
var hasMore = function() {
return !!cursor;
};
var getMeta = function(key, comment) {
if ('iswriter' == key) {
var matches = !!comment.author
&& comment.author.name == authorName
&& comment.author.profileUrl == authorUrl;
return matches ? 'true' : '';
} else if ('deletelink' == key) {
return baseUri + '/delete-comment.g?blogID=' + blogId + '&postID=' + comment.id;
} else if ('deleteclass' == key) {
return comment.deleteclass;
}
return '';
};

var replybox = null;
var replyUrlParts = null;
var replyParent = undefined;

var onReply = function(commentId, domId) {
if (replybox == null) {
// lazily cache replybox, and adjust to suit this style:
replybox = document.getElementById('comment-editor');
if (replybox != null) {
replybox.height = '250px';
replybox.style.display = 'block';
replyUrlParts = replybox.src.split('#');
}
}
if (replybox && (commentId !== replyParent)) {
document.getElementById(domId).insertBefore(replybox, null);
replybox.src = replyUrlParts[0]
+ (commentId ? '&parentID=' + commentId : '')
+ '#' + replyUrlParts[1];
replyParent = commentId;
}
};

var tok = 'comment-form_';
var hash = window.location.hash || '';
var startThread = hash.indexOf(tok) == 1 ? hash.substring(tok.length + 1) : undefined;

// Configure commenting API:
var configJso = {
'maxDepth': 2
};
var provider = {
'id': postId,
'data': items,
'loadNext': paginator,
'hasMore': hasMore,
'getMeta': getMeta,
'onReply': onReply,
'rendered': true,
'initReplyThread': startThread,
'config': configJso,
'messages': msgs
};

var render = function() {
if (window.goog && window.goog.comments) {
var holder = document.getElementById('comment-holder');
window.goog.comments.render(holder, provider);
}
};

// render now, or queue to render when library loads:
if (window.goog && window.goog.comments) {
render();
} else {
window.goog = window.goog || {};
window.goog.comments = window.goog.comments || {};
window.goog.comments.loadQueue = window.goog.comments.loadQueue || [];
window.goog.comments.loadQueue.push(render);
}
})();
// ]]>
</script>
</b:includable>

6. Hapus seluruh kode diatas lalu ganti dengan kode dibawah ini:

<b:includable id='threaded_comment_js' var='post'>
<script async='async' expr:src='data:post.commentSrc' type='text/javascript'/>

<script type='text/javascript'>
(function() {
var items = <data:post.commentJso/>;
var msgs = <data:post.commentMsgs/>;
var config = <data:post.commentConfig/>;

// <![CDATA[
var cursor = null;
if (items && items.length > 0) {
cursor = parseInt(items[items.length - 1].timestamp) + 1;
}

var bodyFromEntry = function(entry) {
if (entry.gd$extendedProperty) {
for (var k in entry.gd$extendedProperty) {
if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved') {
return '<span class="deleted-comment">' + entry.content.$t + '</span>';
}
}
}
return entry.content.$t;
}

var parse = function(data) {
cursor = null;
var comments = [];
if (data && data.feed && data.feed.entry) {
for (var i = 0, entry; entry = data.feed.entry[i]; i++) {
var comment = {};
// comment ID, parsed out of the original id format
var id = /blog-(\d+).post-(\d+)/.exec(entry.id.$t);
comment.id = id ? id[2] : null;
comment.body = bodyFromEntry(entry);
comment.timestamp = Date.parse(entry.published.$t) + '';
if (entry.author && entry.author.constructor === Array) {
var auth = entry.author[0];
if (auth) {
comment.author = {
name: (auth.name ? auth.name.$t : undefined),
profileUrl: (auth.uri ? auth.uri.$t : undefined),
avatarUrl: (auth.gd$image ? auth.gd$image.src : undefined)
};
}
}
if (entry.link) {
if (entry.link[2]) {
comment.link = comment.permalink = entry.link[2].href;
}
if (entry.link[3]) {
var pid = /.*comments\/default\/(\d+)\?.*/.exec(entry.link[3].href);
if (pid && pid[1]) {
comment.parentId = pid[1];
}
}
}
comment.deleteclass = 'item-control blog-admin';
if (entry.gd$extendedProperty) {
for (var k in entry.gd$extendedProperty) {
if (entry.gd$extendedProperty[k].name == 'blogger.itemClass') {
comment.deleteclass += ' ' + entry.gd$extendedProperty[k].value;
}
}
}
comments.push(comment);
}
}
return comments;
};

var paginator = function(callback) {
if (hasMore()) {
var url = config.feed + '?alt=json&v=2&orderby=published&reverse=false&max-results=50';
if (cursor) {
url += '&published-min=' + new Date(cursor).toISOString();
}
window.bloggercomments = function(data) {
var parsed = parse(data);
cursor = parsed.length < 50 ? null
: parseInt(parsed[parsed.length - 1].timestamp) + 1
callback(parsed);
window.bloggercomments = null;
}
url += '&callback=bloggercomments';
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
document.getElementsByTagName('head')[0].appendChild(script);
}
};
var hasMore = function() {
return !!cursor;
};
var getMeta = function(key, comment) {
if ('iswriter' == key) {
var matches = !!comment.author
&& comment.author.name == config.authorName
&& comment.author.profileUrl == config.authorUrl;
return matches ? 'true' : '';
} else if ('deletelink' == key) {
return config.baseUri + '/delete-comment.g?blogID='
+ config.blogId + '&postID=' + comment.id;
} else if ('deleteclass' == key) {
return comment.deleteclass;
}
return '';
};

var replybox = null;
var replyUrlParts = null;
var replyParent = undefined;

var onReply = function(commentId, domId) {
if (replybox == null) {
// lazily cache replybox, and adjust to suit this style:
replybox = document.getElementById('comment-editor');
if (replybox != null) {
replybox.height = '250px';
replybox.style.display = 'block';
replyUrlParts = replybox.src.split('#');
}
}
if (replybox && (commentId !== replyParent)) {
document.getElementById(domId).insertBefore(replybox, null);
replybox.src = replyUrlParts[0]
+ (commentId ? '&parentID=' + commentId : '')
+ '#' + replyUrlParts[1];
replyParent = commentId;
}
};

var hash = (window.location.hash || '#').substring(1);
var startThread, targetComment;
if (/^comment-form_/.test(hash)) {
startThread = hash.substring('comment-form_'.length);
} else if (/^c[0-9]+$/.test(hash)) {
targetComment = hash.substring(1);
}

// Configure commenting API:
var configJso = {
'maxDepth': config.maxThreadDepth
};
var provider = {
'id': config.postId,
'data': items,
'loadNext': paginator,
'hasMore': hasMore,
'getMeta': getMeta,
'onReply': onReply,
'rendered': true,
'initComment': targetComment,
'initReplyThread': startThread,
'config': configJso,
'messages': msgs
};

var render = function() {
if (window.goog && window.goog.comments) {
var holder = document.getElementById('comment-holder');
window.goog.comments.render(holder, provider);
}
};

// render now, or queue to render when library loads:
if (window.goog && window.goog.comments) {
render();
} else {
window.goog = window.goog || {};
window.goog.comments = window.goog.comments || {};
window.goog.comments.loadQueue = window.goog.comments.loadQueue || [];
window.goog.comments.loadQueue.push(render);
}
})();
// ]]>
</script>
</b:includable>

7. Simpan Template anda dan lihat hasilnya

Jika anda sudah mengikuti langkah diatas dengan baik, maka threaded comments akan berfungsi pada blog. Semoga dengan posting diatas dapat membantu dan memecahkan permasalahan yang anda cari, selamat mencobanya.

Komentar

Cara Mengganti Tulisan "Poskan Komentar" di atas Kotak Komentar

Jika anda melihat halaman posting artikel pasti anda akan mendapati tulisan "POSKAN KOMENTAR". Tulisan ini biasanya terletak diatas form komentar atau kotak komentar. Tulisan ini dapat anda ganti sesuai dengan selera anda hanya dalam hitungan detik. Jadi kalo anda baca artikel ini pasti kode yang saya kasih ini tidak akan meleset....he3 just kidding. Oke kalo begitu langsung ikuti trik di bawah ini:

1. Login pada blog
2. Masuk ke Rancangan - Edit HTML
4. Centang Expand Template Widget
5. Cari kode seperti pada gambar dibawah ini, biasanya ada tiga kode yang sama seperti ini, jadi anda hanya perlu mengganti kode yang kedua.

6. Hapus kode tersebut lalu gantikan dengan pesan yang anda ingin sampaikan.
7. Simpan Template

Cobalah anda lihat hasilnya....Dijamin pasti berhasil....oke sekian trik dari saya. Jangan lupa berkomentar ya.....Bagaimana mudah kan? Selamat Mencoba!!!

Komentar , Teks , Tips dan Triks

Cara Membuat Kotak Pesan Admin (Author Box) di Blog

Author box atau Kotak Pesan Admin biasanya digunakan sebagai tanda pengenal seorang penulis dari sebuah blog, atau berupa penyampaikan pesan singkat dari penulis. Kotak pesan tersebut terdapat gambar dari penulis blog serta ucapan terima kasih kepada penunjung yang telah berkunjung dan membaca artikel pada blog. Kotak admin pada dasarnya ditempatkan dibawah posting blog dan umumnya judul posting yang dibaca. Saya akan memberikan langkah untuk membuat author box pada blog anda.

1. Login ke Blogger
2. Masuk ke Rancangan lalu pilih Edit HTML
3. Expand Template Widget anda
4. Paste kode dibawah ini diatas kode ]]></b:skin>

.admin-tulisan{
display:block;
width:auto;
background:#F5F5F5;
border:1px solid #C0C0C0;
box-shadow:0 1px 3px #000;-moz-box-shadow:0 1px 3px #000;-webkit-box-shadow:0 1px 3px #000;
padding:0;
margin:30px 0 10px 0;
font:normal 12px Arial, Sans-Serif;
color:#222;
}
.admin-tulisan .kontainer{padding:5px;}
.admin-tulisan h4{
background:#C0C0C0;
border:none;
border-bottom:1px solid #C0C0C0;
color:#fff;
text-transform:normal;
text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);
font:bold 12px Arial,Sans-Serif;
padding:5px 10px;
margin:0 0 0 0;
display:block;
}
.admin-tulisan h4 a{color:#FEEA83;}
.admin-tulisan img{
width:70px;
height:70px;
margin:0 10px 0 0;
float:left;
border:0px solid #E6E6FA;
padding:2px;
background:#E6E6FA
box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;
}

5. Paste kode dibawah ini diatas kode <div class='post-footer'>

<!-- Kotak Admin -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='admin-tulisan'>
<h4>Ditulis Oleh : <a expr:href='data:blog.homepageUrl'><data:post.author/></a> ~ Blog Trik dan Tips</h4>
<div class='kontainer'>
<img height='80' src='http://1.bp.blogspot.com/-Vhz0UpxY3w0/T2cCx3-UKCI/AAAAAAAABxU/6UMbVlexRPo/s220/Picture%2B004.jpg' width='75'/>
Anda sedang membaca sebuah artikel yang berjudul <b><a expr:href='data:post.url'><data:post.title/></a></b>,, Semoga artikel tersebut bermanfaat untuk anda .... <p><span style='float:right;font:italic 10px Arial, Sans-Serif;'><a href='http://blogtrikdantips.blogspot.com' target='_blank'>:: Thank you for visiting ! ::</a></span></p>
<div style='clear:both;'/>
</div>
</div>
</b:if>
<!-- Kotak Admin -->

Keterangan: kode merah adalah url gambar

6. Simpan template anda lalu lihat hasilnya

Kini anda akan memiliki Author Box yang keren. Selanjutnya anda tinggal mengedit kode diatas agar pesan author box sesuai dengan kebutuhan anda. Oke selamat mencobanya!

Komentar , Teks , Tips dan Triks

Cara Membuat Komentar Facebook di Blog

Facebook comments dapat membuat blog anda menjadi lebih interaktif. Komentar di blog anda akan muncul seperti yang anda lihat pada facebook. Beberapa fitur yang ada pada komentar facebook yaitu treaded komentar, facebook like, anda dapat subscibe atau tidak subscibe pada komentar, serta dapat memoderasi komentar anda. Tutorial ini akan membantu anda membuat komentar facebook pada blog.

Cara mendapatkan Application ID
1. Kunjungi situs https://developers.facebook.com/apps
2. Klik klik Create New App
3. Masukan App Name lalu klik Continue
4. Tulislah Captha verifikasi dan klik tombol Submit
5. Anda akan masuk ke Setting Screen, lalu lengkapi formulir yang ada seperti dibawah ini:

Keterangan: Isi App Domain dengan blogspot.com, selanjutnya isi Site Url pada link Website dengan alamat url blog anda.
6. Save Changes, lalu Kopi App ID di bagian atas

Membuat Kotak Komentar Facebook pada Blog
1. Masuk ke Blogger
2. Pilih Rancangan, lalu klik Edit HTML
3. Centang Expand Template Widget

4. Letakkan kode dibawah ini setelah kode <head>

<meta content='YOUR_FACEBOOK_APPLICATION_ID' property='fb:app_id'/>

Keterangan: Ganti kode berwarna biru dengan ID App anda. Script diatas berfungsi untuk melakukan moderasi komentar.

5. Cari kode dibawah ini:

<div class='post-footer-line post-footer-line-3'>

atau

<p class='post-footer-line post-footer-line-3'>

6. Paste kode dibawah ini setelah kode yang ada pada langkah ke.5

<b:if cond='data:blog.pageType == "item"'>
<div id="fb-root"></div>
<script>(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
<fb:comments width='450' colorscheme='light' expr:title='data:post.title' expr:href='data:post.canonicalUrl' expr:xid='data:post.id'/>
</b:if>

Keterangan: Anda dapat mengganti lebar dan warna (light / dark) dari kotak komentar

7. Anda harus menambahkan deklarasi untuk nama FB, caranya yaitu cari kode ini:

<html

8. Ubah kode tersebut seperti dibawah ini

<html xmlns:fb="https://www.facebook.com/2008/fbml"

9. Simpan template anda.

Jika sobat telah melakukan langkah diatas dengan benar maka sobat bisa melihat kotak komentar facebook langsung dari blog. Selamat mencoba!

Facebook , Komentar

Cara Membuat Embeddable Forum dengan Tal.ki

Forum adalah sebuah ruang atau tempat yang disediakan untuk berinteraksi dan bertukar pikiran bagi para pengunjung atau blogger dimana pada tiap kategori dalam forum ada pembahasan-pembahasan khusus. Forum adalah suatu sarana untuk mencari informasi yang bisa di katakan lebih lengkap serta lebih detail. Selain itu forum juga sering digunakan sebagai tempat untuk berpromosi. Melalui forum kita dapat saling berinteraksi satu sama lain. Ada cara yang mudah untuk kita membuat forum pada blog. Jika penasaran ikuti langkah berikut ini:

Kopi Scipt Kode dari Tal.ki untuk Membuat Forum
1. Kunjungi situs ini http://tal.ki/pricing/
2. Pada Home Page situs tersebut Klik tombol GET YOUR EMBEDDABLE FORUM

3. Pada halaman selanjutnya klik tombol Try It For Free
4. Pilih account yang anda inginkan untuk Sign In (Facebook, Twitter, dll)
5. Setelah Sign In Kopi Script/Kode dari Tal.ki

Memasang Script Forum di Blogger
1. Login ke Blogger
2. Masuk ke Posting --> Entri Baru
3. Klik Edit HTML
4. Masukan Script Kode yang sudah dikopi tadi

Selesai sudah anda membuat forum pada Posting Blog. Anda juga bisa membuat pada halaman terpisah dari posting sehingga tidak muncul dalam daftar post. Semoga artikel ini bermanfaat, selamat mencoba!

Komentar , Widget

Membuat Recent Comment JSON dengan Avatar

Inilah yang ditunggu-tunggu blog trik dan tips, akhirnya ditemukan juga membuat recent comment dengan avatar". Trik ini dibuat oleh Blogger Tune Up, dengan judul Percantik Sidebar Komentar Versi 2.0 atau judul bahasa inggrisnya Beauty Recent JSON Comments Sidebar 2.0. Widget ini mampu menampilkan avatar dari pengujung yang meninggalkan komentar. Selain itu akan muncul tooltip cantik ketika mouse diarahkan diatas, tool tip itu berisi nama komentator. Animasi tool tip ini sangat menarik jika dilihat oleh pengunjung blog anda. Jika Ingin memasangnya cukup mudah tinggal mengikuti langkah berikut:

1. Masuk ke Rancangan --> Elemen Halaman
2. Tambahkan gadjet lalu pilih HTML/JavaScript
3. Kopi dan masukan kode dibawah ini pada gadjet tadi

<style type="text/css">
#komentar {
background:#3eb5da;
margin:0;
padding:0;
border:1px solid #0971C8;
}
#komentar ul{
margin:0;
padding:0px;
list-style: none;
}
#komentar ul li:first-child {
border-top:none;
}
#komentar ul li {
height:46px;
border-bottom:1px solid #0971C8;
border-top:1px solid #CCCCCC;
padding:2px 0;
list-style:none;
}
#komentar ul li:last-child {
border-bottom: none;
}
#komentar ul li:hover {
background-color:#7BC4DF;
}
#komentar a,
#komentar a:link,
#komentar a:visited {
clear:both;
color:#222;
display:block;
text-decoration:none;
}
#komentar .gamen {
display: block;
float: left;
height: 42px;
left: 4px;
margin-right: 15px;
position: relative;
width: 42px;
}
#komentar .gamen>img {
border: 2px solid #ffffff;
-webkit-border-radius: 22px;
-moz-border-radius: 22px;
border-radius: 22px;
box-shadow: 0 1px 2px #222222;
}
#komentar ul li div.ismen {
color:#ffffff;
text-shadow:-1px -1px 1px #0971C8;
}
#komentar .ismen {
display: block;
font-size: 1em;
font-style: italic;line-height: 1.2;
padding: 2px 4px 2px 0;
}
#komentar .gamen>span{
width: 150px;
height: auto;
line-height: 20px;
padding: 5px;
left: 115px;
margin-left: -64px;
font-size: 1em;
font-weight:bold;
color: #212121;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
text-align: center;
border: 4px solid #0971C8;
background: rgba(255,255,255,0.7);
text-indent: 0px;
border-radius: 5px;
position: absolute;
pointer-events: none;
bottom: 100px;
opacity: 0;
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#komentar .gamen>span:before,
#komentar .gamen>span:after{
content: '';
position: absolute;
bottom: -15px;
left: 50%;
margin-left: -9px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid rgba(0,0,0,0.1);
}
#komentar .gamen>span:after{
bottom: -14px;
margin-left: -10px;
border-top: 10px solid #0971C8;
}
#komentar .gamen:hover>span{
opacity: 0.9;
bottom: 55px;
}
</style>
<div id='komentar'>
<ul>
<script type='text/javascript'>
//<![CDATA[
var jmlkomentar = 20;
var jmlkarakter = 60;
//]]></script>
<script type="text/javascript" src="http://henscripts.googlecode.com/svn/trunk/json.comments.min.js"></script>
<script type="text/javascript" src="http://blogtrikdantips.blogspot.com/feeds/comments/default?alt=json&callback=tampilkankomentar"></script>
</ul>
</div>

Keterangan:
- blogtrikdantips.blogspot.com ubah sesuai dengan alamat blog anda.
- var jmlkomentar = 20; ubah nilai 20 untuk menentukan jumlah komentar.
- var jmlkarakter = 60; ubah nilai 60 untuk menentukan jumlah karakter.

4. Simpan gadjet anda

Jika Anda ingin membuat Recent Comment Jason tersebut Tanpa Style (warna disesuaikan dengan background template anda) maka kopi kode dibawah ini lalu masukan keterangan seperti diatas:

<style type="text/css">
#komentar {
margin:0;
padding:0;
}
#komentar ul{
margin:0;
padding:0px;
list-style: none;
}
#komentar ul li {
height:46px;
margin:0 !important;
padding:4px 0 !important;
display:block;
clear:both;
list-style:none;
}
#komentar ul li:last-child {
border-bottom:none;
}
#komentar ul li:hover {
background-color:#ccc;
}
#komentar a, #komentar a:link, #komentar a:visited {
clear:both;
color:#222;
display:block;
text-decoration:none;
text-shadow:0 1px 0 #ccc;
}
#komentar .gamen {
display: block;
float: left;
height: 42px;
left: 4px;
margin-right: 15px;
position: relative;
width: 42px;
}
#komentar .gamen>img {
border: 2px solid #fefefe;
-webkit-border-radius: 22px;
-moz-border-radius: 22px;
border-radius: 22px;
-webkit-box-shadow:0 1px 2px #222;
-moz-box-shadow:0 1px 2px #222;
box-shadow:0 1px 2px #222;
}
#komentar .gamen>span{
width: 150px;
height: auto;
line-height: 20px;
padding: 5px;
left: 115px;
margin-left: -64px;
font-size: 1em;
font-weight:bold;
color: #212121;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
text-align: center;
border: 4px solid #ccc;
background: rgba(255,255,255,0.7);
text-indent: 0px;
border-radius: 5px;
position: absolute;
pointer-events: none;
bottom: 100px;
opacity: 0;
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#komentar .gamen>span:before,
#komentar .gamen>span:after{
content: '';
position: absolute;
bottom: -15px;
left: 50%;
margin-left: -9px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid rgba(0,0,0,0.1);
}
#komentar .gamen>span:after{
bottom: -14px;
margin-left: -10px;
border-top: 10px solid #ccc;
}
#komentar .gamen:hover>span{
opacity: 0.9;
bottom: 55px;
}
#komentar .ismen {
display: block;
font-size: 1em;
line-height: 1.2;
padding: 2px 4px 2px 0;
}
</style>
<div id='komentar'>
<ul>
<script type='text/javascript'>
//<![CDATA[
var jmlkomentar = 20;
var jmlkarakter = 60;
//]]></script>
<script type="text/javascript" src="http://henscripts.googlecode.com/svn/trunk/json.comments.min.js"></script>
<script type="text/javascript" src="http://blogtrikdantips.blogspot.com/feeds/comments/default?alt=json&callback=tampilkankomentar"></script>
</ul>
</div>

Selamat mencobanya!

Komentar

Menambah Fitur Reply Pada Blog

Fitur reply biasanya hanya tersedia pada template blogger yang baru, namun jika anda menggunakan custom template, terkadang fitur ini tidak ditemukan. Fitur ini juga dapat ditemukan di wordpress, namun kita tidak tidak membahas mengenai wordpress untuk saat ini. Fitur ini sangat penting untuk membangun interaksi dan kemudahan dalam memberikan komentar. Langkah untuk memasang fitur ini mudah saja:

1. Masuk ke Rancangan -- Klik Edit HTML
2. Centang Expand Widget Template
3. Tambahkan kode di bawah ini dibawah kode <data:commentPostedByMsg/>

<span><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=ID BLOG&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450&quot;); return false;'>[Reply]</a></span>

4. Ganti kode berwarna biru dengan blogID anda. Anda dapat melihat blogID anda saat menerbitkan entri (misalnya http://www.blogger.com/post-create.g?blogID=62118929005122863).
5. Simpan template anda dan lihat hasilnya

Selamat mencoba!

Komentar

Membuat Treaded Comments pada Blog

Treaded comments biasanya hanya tersedia pada original blogger template yang kini hadir dengan fitur templatenya yang baru. Fungsinya yaitu memberikan kemudahan bagi pengunjung dan pemilik blog untuk membalas komentar yang masuk. Komentar yang dibalas akan condong masuk ke dalam (tidak sejajar dengan komentar sebelumnya diatas).

Biasanya pada beberapa template custom treaded comments tidak disertakan threaded comments sehingga kita perlu mengaktifkannya dulu. Untuk mengaktifkan fungsi treaded comments untuk custom blogger templates ikut trik berikut ini:

1. Masuk ke Rancangan --> Edit HTML
2. Centang Expand Template Widget
3. Cari kode berikut ini:

<b:include data='post' name='comments'/>

4. Setelah menemukan kode seperti diatas (terdapat 3 atau 4 kode) ganti semua kode tersebut dengan kode dibawah ini:

<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>

5. Setelah semua kode sudah diganti, Simpan Template anda

Sangat mudahkan caranya.....Selamat mencobanya!

Komentar , Tips dan Triks

Membuat Komentar Show Hide pada Blog

Jika anda memiliki komentar yang sangat banyak pada blog dan ingin memperpendek komentar tersebut mengapa tidak mencoba trik yang satu ini. Tentunya pada postingan kali ini kita akan membahas bagaimana cara membuat komentar show hide pada blog. Ketika membuka halaman posting seluruh komentar belum muncul kecuali anda menekan tombol komentar. Tombol tersebut juga akan menampilkan jumlah komentar yang masuk pada posting anda. Oke, jika ingin mencobanya langsung saja ke triknya yang satu ini:

1. Masuk ke Blogger
2. Pilih Rancangan --> Edit HTML
3. Klik "Expand Widget"
4. Kopi kode di bawah ini lalu paste diatas kode ]]></b:skin>

/* SHOW-HIDE COMMENTS */
#panel {
clear: both;
display: none;
overflow: auto;
padding: 10px;
}

.slide {
background: #f1f1f1;
border-bottom: 1px solid #c3c3c3;
border-top: 1px solid #c3c3c3;
margin: 1.5em 0 0;
padding: 0;
}

.btn-slide {
cursor: hand;
cursor: pointer;
display: block;
font-weight: bold;
margin: 0 auto;
padding: 10px;
text-align: center;
}

5. Kopi script dibawah ini dan paste diatas </body>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&#39;.btn-slide&#39;).click(function(){
$(&#39;#panel&#39;).slideToggle(&#39;slow&#39;);
});
});
</script>

6. Cari kode elemen komentar seperti dibawah ini:

<b:includable id='comments' var='post'>
<div id='panel'> <!-- sisipkan (id) panel di sini -->
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>
<b:if cond='data:post.commentPagingRequired'>


... <!-- menandakan kode yang sangat panjang -->


<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>
</div> <!-- merupakan akhir dari #panel -->
<div class='slide'>
<p class='btn-slide'>
Masukan kata-kata <!-- Silakan ganti ini -->
</p>
</div>
</b:includable>

Keterangan:
- Warna biru merupakan tanda supaya anda menyisipkan kode tersebut.
- Warna Merah silahkan ganti dengan text sesuai keinginan anda.

Contoh: SHOW/HIDE atau anda bisa menggantinya dengan kode ini. Kode di bawah berfungsi untuk menampilkan jumlah komentar yang ada.

7.) Simpan dan lihat hasilnya.

Selamat mencoba!

Komentar , Tips dan Triks

Membuat Buku Tamu dengan Efek Show Hide

Buku tamu berfungsi untuk meninggalkan pesan dari pengunjung yang datang ke blog kita. Kita bisa memperoleh buku tamu dari chatbox, shoutbox (berbayar), dll. Selain itu ada juga beberapa cara kita menempatkan buku tamu pada halaman blog. Semuanya itu tergantung dari selera kita masing-masing. Biasanya ada yang menempatkan buku tamu pada sidebar dan footer, namun ada juga yang menempatkan buku tamunya di sudut blog "menyembunyikan buku tamu dengan efek slide". Kali ini kita akan membuat penempatan buku tamu dengan cara Show Hide. Jika penasaran ikuti langkahnya berikut ini:

1. Masuk ke Rancangan -- Elemen Laman
2. Tambahkan gadjet lalu pilih HTML/Javascript
3. Masukan kode di bawah ini:

<style type="text/css">
#at{
position:fixed;
right:450px;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url();
}
.atcontent{
float:left;
border:2px solid #00ff00;
-moz-box-shadow: -2px 2px 25px lime;
background:#000 no-repeat center;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onclick="showHideAT()"> </div>
<div class="atcontent">
<div align="center">
<div style="background:url();">


<!-- Masukan Kode Cbox Anda -->

</div>
</div>
</div>
<br/>
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU9w8VXTjoDfbt91oU2aDb34-bOlndNPsTsIL_V-SjSmREFZK5ykNbFzdJMCsVU3lvgDP66darmfYXEpvjOj4YwGwiZEvzwCTVl4LYTt1Oo-XgC4NMMwarL-7dsM7txY0LXVhlj_WBX_m0/s1600/close.png" alt="close" title="Click here to Close Cbox" /></a></div>
</div>


<script type="text/javascript">
var at = document.getElementById("at");
at.style.top = (-200-at.offsetWidth).toString() + "px";
</script>


<div style='display:scroll; position:fixed; top:80px; left:3px;'><a href="javascript:void(0);"onclick="showHideAT()"/><img src="http://dl.dropbox.com/u/24368183/chatbox.gif" /></a>
</div>

Keterangan:
- Anda dapat mengedit kode diatas untuk tampilan dan penempatan buku tamu

4. Masukan kode buku tamu anda pada kode diatas yang berwarna merah
5. Simpan gadjet dan lihat hasilnya

Selamat mancoba, semoga artikel ini bermanfaat!

Animasi , Komentar , Tips dan Triks

Cara Membuat Buku Tamu Tersembunyi di Blog

Jika blog anda sudah tidak ada ruang untuk menampilkan buku tamu atau anda sudah bosan dengan penampilan buku tamu yang ala kadarnya, maka anda harus coba tutorial berikut ini yaitu membuat buku tamu tersembunyi. Buku tamu tersembunyi yang saya maksud adalah buku tamu yang disembunyikan dibagian samping halaman blog anda, dan akan muncul ketika anda mengklik tombol buku tamu atau sebaliknya akan tutup jika anda mengklik tombolnya kembali. Untuk cara membuatnya sangat mudah ikuti langkahnya dibawah ini:

1. Login ke blogger
2. Masuk ke Rancangan -- Elemen Laman
3. Tambahkan Gadjet lalu pilih HTML/JavaScript
4. Masukan kode berikut ini:

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://1.bp.blogspot.com/-Q5TgNw6u0_M/T7s_czTIedI/AAAAAAAADTM/xTgzEQV5Dfs/s400/tabs.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

<!-- Ganti ini dengan kode buku tamu kamu -->

<br/>
Mau punya buku tamu seperti ini?<br/>
Klik di sini:
<a href="http://blogtrikdantips.blogspot.com/2009/09/membuat-buku-tamu-tersembunyi.html">
(Blog Trik dan Tips)
</a>

<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

6. Ganti kode berwarna merah diatas dengan kode buku tamu anda.
7. Simpan gadjet tersebut

Demikian langkah-langkah untuk membuat buku tamu tersembunyi. Selamat mencoba!!!!

Komentar , Widget

Memasang Avatar pada Komentar

Seringkali kita memberi komentar pada posting teman-teman atau sahabat. Di sekitar komentar tersebut pasti anda melihat ada sebuah icon default blogger. Pada beberapa blog icon tersebut diganti dengan avatar. Jika template bawaan anda tidak memiliki avatar di samping komentar maka ada trik untuk membuatnya. Dengan menambahkan avatar tentunya blog anda akan terlihat lebih menarik. Ikuti langkah berikut ini:

1. Login ke akun blogger,
2. Pilih Rancangan -- Edit HTML
3. Centang Expand Template Widget
4. Sebelum mengedit template saya anjurkan anda untuk membackup template terlebih dahulu
4. Cari kode </head> dan kopi paste kode berikut ini diatasnya.

<script type='text/javascript'>
//<![CDATA[
/*
Merlinox and Napolux MyBlogLog Avatar Creator
created by Merlinox (blog.merlinox.com)
helped by Napolux (www.napolux.com)

version 0.1 (20061214)
version 0.2 (20061215)
compatible with all blogger blog
*/

if(typeof(myLayer)!='function'){
function myLayer (x){
//individuo l'oggetto
if(document.layers){ // browser="NN4";
lay=document.layers[x];
}
if(document.all){ // browser="IE";
lay=eval("document.all." + x);
}
if(!document.all && document.getElementById){ // browser="NN6+ or IE5+ if you're willing to dump the !document.all stuff";
lay=document.getElementById(x);
}
return lay;
}
}

//lo prendo da blogger
function myBlogAvatar(codiceCommento,autore,stile){
//scrivo lo span
//var myBlogSpan = "myBlog-" + codiceCommento;
//document.write("<span id='" + myBlogSpan + "'><i>myBlogLog...</i></span>");

//metto tutto minuscolo perchè indexOf è case sensitive

if (autore != ""){
alt="MyBlogLog: " + autore;

myBlog = "<a target='_blank' href=\"http://www.mybloglog.com/buzz/co_redir.php?href=" + autore + "\" rel='nofollow'><img src=\"http://pub.mybloglog.com/coiserv.php?href=" + autore + "\" alt=\"" + alt + "\" title=\"" + alt + "\" border=\"1\" class=\"myBlogAvatar\"></a>";
//myLayer(myBlogSpan).innerHTML = myBlog + myLayer(myBlogSpan).innerHTML;
//myLayer(myBlogSpan).innerHTML = myBlog;
document.write(myBlog);
}
}
//]]>
</script>

5. Selanjutnya cari kode ini juga:
<b:loop values='data:post.comments' var='comment'>

6. Jika sudah ketemu paste kode berikut ini dibawah kode diatas tadi

<div style='border:0;float:left;margin: 0 5px 0 0;'>
<script>
myBlogAvatar('<data:comment.id/>','<data:comment.authorUrl/>');
</script>
</div>

Keterangan:
Anda dapat memodifikasi kode yang berwarna merah untuk mengatur tampilan avatarnya....
7. Terakhir, simpan template sobat dan lihat hasilnya!!!!

Komentar